<template>
  <div class="Header">
    <div v-if="shoppingList.length == 0" class="items shopping" v-for="item in 2" :key="item">
      <el-radio-group v-model="radio">
        <el-radio value="1" size="large">
          <div class="items shopping">
            <div class="img">
              <img src="/src/assets/image/goodscs.png" alt="">
            </div>
            <div class="name">
              <div>
                <div class="name_style_1 multi-line-omit">Название продукта слишком длинноеНазвание продукта слишком
                  длинноеНазвание продукта слишком длинное
                </div>
                <div class="mTop8 name_style_2">Доставка 48 часов/Проверка/Пакет</div>
              </div>
              <div class="name_style_3">398.00₽</div>
            </div>
            <div class="size" ref="sizeRef" @click="getSizeRefDom(item)">
              <div>размер：M</div>
              <div>цвета：Синий</div>
              <div class="EditPenIcon">
                <el-icon color="#ffffff">
                  <EditPen/>
                </el-icon>
              </div>
            </div>
            <div class="">
              <el-input-number class="num" v-model="num" :min="1" :max="10" @change="handleChange"/>
            </div>
            <div class="controls">
              <div class="controls_style_1 center">Коллекция</div>
<!--              <div class="controls_style_2 center">Удалить</div>-->
              <el-icon :size="18" color="#0070E9">
                <Delete/>
              </el-icon>
            </div>
            <div class="allMoney center end">
              <div class="allMoney_style_1">Итого:</div>
              <div class="allMoney_style_2">796.00₽</div>
            </div>
          </div>
        </el-radio>
      </el-radio-group>
    </div>
    <div v-else class="center noHave_data column">
      <img src="/src/assets/icons/noHave_data.png" alt="" class="noHave_data_img">
      <div class="noHave_data_title">Пока нет товаров, чтобы добавить в корзину покупок, быстро выбирайте
      </div>
    </div>

  </div>
</template>

<script lang="ts" name="Shopping_list" setup>
// 组件传来的值
import {Delete, EditPen} from "@element-plus/icons-vue";
import {ref, reactive,defineEmits} from "vue";

const emit = defineEmits(['getPosition'])
defineProps({
  // xlink:href属性的前缀
  shoppingList: {
    type: Array,
    default: [],
  },
})
const state = reactive({

})
let radio = ref(false)
let num = ref(0)
const sizeRef = ref()

function handleChange() {

}
const getSizeRefDom = (index:number) => {
  const rect = sizeRef.value[index - 1].getBoundingClientRect();
  // 计算元素相对于文档的位置
  const globalX = rect.left + window.scrollX;
  const globalY = rect.top + window.scrollY;
  // console.log(globalY, globalX)
  emit('getPosition', globalY, globalX)
}
</script>

<style lang="less" scoped>
.multi-line-omit {
  word-break: break-all; // 允许单词内自动换行，如果一个单词很长的话
  text-overflow: ellipsis; // 溢出用省略号显示
  overflow: hidden; // 超出的文本隐藏
  //display: -webkit-box; // 作为弹性伸缩盒子模型显示
  -webkit-line-clamp: 2; // 显示的行
  -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
}

:deep(.el-radio__inner) {
  width: 20px !important;
  height: 20px !important;
}

:deep(.el-radio__inner::after) {
  width: 7px !important;
  height: 7px !important;
}

.shopping {
  width: 1320px;
  height: 136px;
  margin-top: 10px;

  .img {
    width: 96px;
    height: 96px;
    border-radius: 4px;
    overflow: hidden;

    img {
      width: 100%;
    }
  }

  .name {
    width: 364px;
    height: 96px;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: PingFang SC;

    .name_style_1 {
      font-size: 16px;
      line-height: 19.2px;
      color: #333333;
      font-weight: 600;
      text-align: left;
      font-style: normal;
      text-transform: none;
      width: 300px;
    }

    .name_style_2 {
      font-size: 12px;
      line-height: 12px;
      color: #999999;
    }

    .name_style_3 {
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 20px;
      color: #F83C57;
      line-height: 20px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }

  .size {
    width: 132px;
    height: 76px;
    padding: 10px 14px;
    border-radius: 8px;
    //border: 1px solid #0070E9 ; /* 实线边框 */
    outline: 2px dashed #0070E9;
    outline-offset: -2px;
    box-shadow: 0 0 0 2px white; /* 背景色 */
    position: relative;

    .EditPenIcon {
      position: absolute;
      width: 24px;
      height: 24px;
      right: 0;
      top: 0;
      background-color: #0070E9;
      border-top-right-radius: 8px;
      border-bottom-left-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .popop {
      width: 626px;
      height: 269px;
      border-radius: 16px;
      position: absolute;
      top: 98px;
      left: 0;
      background-color: #FFFFFF;
      box-shadow: 0px 0px 20px 0px #00000033;
      padding: 20px;
      display: flex;

      .img {
        width: 200px;
        height: 200px;
        background-color: #F6F6F6;
      }

      .size_setting {
        width: 406px;
        margin-left: 20px;

        .size_line {
          width: 100%;
          height: 1px;
          background: #EEEEEE;
          margin-top: 55px;
        }

        .size_text_style_1 {
          font-family: PingFang SC;
          font-size: 14px;
          font-weight: 400;
        }

        .size_mune_1 {
          width: 41px;
          height: 34px;
          border-radius: 4px;
          color: #FFFFFF;
          background: #0070E9;
        }

        .size_mune_2 {
          width: 41px;
          height: 34px;
          border-radius: 4px;
          color: #333333;
          background: #F6F6F6;
        }

        .size_color_1 {
          width: 80px;
          height: 34px;
          border-radius: 4px;
          color: #FFFFFF;
          background: #0070E9;
        }

        .size_color_2 {
          width: 80px;
          height: 34px;
          border-radius: 4px;
          color: #333333;
          background: #F6F6F6;
        }

        .size_btn_1 {
          width: 140px;
          height: 48px;
          border-radius: 8px;
          color: #FFFFFF;
          background: #0070E9;
        }

        .size_btn_2 {
          width: 140px;
          height: 48px;
          border-radius: 8px;
          color: #333333;
          background: #F6F6F6;
        }
      }
    }
  }

  .num {
    width: 104px;
    height: 32px;
    gap: 15px;
    margin-left: 70px;
  }

  .controls {
    width: 107px;
    height: 64px;
    margin-left: 10px;
    font-family: PingFang SC;
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    color: #999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    .controls_style_1 {
      width: 107px;
      height: 32px;
      padding: 2px 12px 2px 12px;
      gap: 10px;
      border-radius: 8px;
    }

    .controls_style_2 {
      width: 87px;
      height: 32px;
      padding: 2px 12px 2px 12px;
      gap: 10px;
      border-radius: 8px;
    }
  }


}

.allMoney {
  width: 330px;
  height: 64px;
  font-family: PingFang SC;
  text-align: right;
  font-weight: 400;
  .allMoney_style_1 {
    font-size: 12px;
    line-height: 12px;
    color: #333333;
  }

  .allMoney_style_2 {
    font-family: Segoe UI, Segoe UI;
    font-weight: bold;
    font-size: 20px;
    color: #F83C57;
    line-height: 20px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-left: 8px;
  }


}

.noHave_data {
  width: 1320px;
  height: auto;
  margin-top: 10px;

  .noHave_data_img {
    width: 600px;
    height: 300px;
  }

  .noHave_data_title {
    width: 320px;
    height: 34px;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 400;
    line-height: 16.8px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #999999;
  }
}
</style>
